<!--
自定义组件，自定义间距有12px和16px两种，默认为12px，large是16px
-->
<template>
  <div :class="['empty-content', theme]">
    <img
      :width="width"
      :src="require(`@/assets/images/empty/${imgUrl}.svg`)"
      alt=""
    />

    <div class="title1">
      <slot name="title">{{ title || imgType[type] }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rj-empty',
  props: {
    title: {
      type: [String],
      default: '',
    },
    type: {
      type: [String],
      default: 'nodata', //暂无数据  noresult//搜索无结果
      //noresult-暂无产品 nocontent-通用/暂无内容 noproduct暂无产品
      // nolist暂无清单 noonlineusers暂无在线用户 noconfiguration暂不支持配置 image暂无图片
      //pinglun 暂无评论
    },
    width: {
      type: Number,
      default: 160,
    },
    theme: {
      type: [String],
      default: '',
    },
  },
  components: {},
  data() {
    return {
      spaceSize: 8,
      slotArr: [],
      imgType: {
        nodata: this.$t('empty.nodata'),
        noresult: this.$t('empty.noresult'),
        nocontent: this.$t('empty.nocontent'),
        noproduct: this.$t('empty.noproduct'),
        nolist: this.$t('empty.nolist'),
        noonlineusers: this.$t('empty.noonlineusers'),
        noconfiguration: this.$t('empty.noconfiguration'),
        image: this.$t('empty.image'),
        pinglun: this.$t('empty.pinglun'),
      },
    };
  },
  created() {
    if (this.size == 'large') {
      this.spaceSize = 16;
    } else if (this.size == 'middle') {
      this.spaceSize = 8;
    } else {
      this.spaceSize = this.size;
    }
  },
  mounted() {
    this.slotArr = Object.keys(this.$slots);
  },
  computed: {
    imgUrl() {
      let theme = this.theme.toLocaleLowerCase();
      let url = `ic_empty_${this.type}`;
      if (theme == 'black') {
        url = `ic_empty_${this.type}${theme}`;
      }
      return url;
    },
  },
};
</script>
<style lang="less" scoped>
.empty-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 40px;
}
.flex-center {
  display: flex;
  align-items: center;
}
.title1 {
  font-size: 14px;
  color: @gray-8;
  margin-top: 16px;
}
.black {
  .title1 {
    color: @gray-7;
  }
}
</style>
